<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
				<div>
                    <div class="layui-card">
                    	<div class="layui-card-header" style="margin-left: 10%">班级：${stuScore.class_name}</div>
                    	<div class="layui-card-header" style="margin-left: 10%">学期：${stuScore.as_term}</div>
                    	<div class="layui-card-header" style="margin-left: 10%">课程：${stuScore.course}</div>
                        <div class="layui-card-header" style="margin-left: 10%">老师：${stuScore.te_truename}</div>
						<div class="layui-card-header" style="margin-left: 10%;color:red;">平均成绩：${stuScore.average}</div>
                    </div>
                </div>
                <div>
					<div class="layui-card-header" style="background-color:white;">本学年各评分指标</div>
	                    <div style="background-color:white;display:flex;justify-content:space-around;flex-wrap:wrap">
	                        <c:forEach items="${poll}" var="item">
	                        <div style="width:25%;height:350px;">
	                  
								<div id="SM${item.id}" style="height:300px;"></div>
								
								<div style="text-align:center;">${item.mark.ma_kind}</div>
	                        </div>
	                        </c:forEach>
	                    </div>
                	</div>
            </div>
        </div>
        </div>
    
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
        <script type="text/javascript">
        var poll = eval(${polljson}.poll) 
        for(var i=0;i<=poll.length;i++){
        	// 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('SM'+poll[i].id));
            // 指定图表的配置项和数据
            var option = {
                tooltip : {
                    trigger: 'item'
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '50%',
                        
                        data:[
                            {value:poll[i].b, name:poll[i].mark.b},
                            {value:poll[i].c, name:poll[i].mark.c},
                            {value:poll[i].d, name:poll[i].mark.d},
                            {value:poll[i].a, name:poll[i].mark.a}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        } 
       
    </script>
    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
    </script>
    </body>
</html>